<template>
  <div>
    <NuxtLayout name="home-page" :title="title">
      <div class="main rounded-box">
        <!--格式-->
        <div class="example mt-2">
          <AnnCard title="我的网站信息" icon-name="flat-color-icons:link">
            <div class="text-sm">
              <div class="flex items-center">
                <span class="w-24">网站名称：</span>
                <span class="truncate">{{ myFriendLink.blogTitle }}</span>
              </div>
              <div class="flex items-center mt-2">
                <span class="w-24">网站简介：</span>
                <span class="truncate">{{ myFriendLink.blogDesc }}</span>
              </div>
              <div class="flex items-center mt-2">
                <span class="w-24">网站logo：</span>
                <a class="link link-success truncate" target="_blank"
                   :href="myFriendLink.blogLogoImage">
                  {{ myFriendLink.blogLogoImage }}</a>
              </div>
              <div class="flex items-center mt-2">
                <span class="w-24">网站地址：</span>
                <a class="link link-success truncate" target="_blank"
                   :href="myFriendLink.blogAddress">{{ myFriendLink.blogAddress }}</a>
              </div>
            </div>
          </AnnCard>
        </div>
        <!--    申请友链  -->
        <div class="totalLink justify-end">
          <div class="stats shadow border border-base-300">
            <div class="stat">
              <div class="stat-figure text-secondary">
                <Icon name="twemoji:clinking-glasses" size="32"/>
              </div>
              <div class="stat-title">Total Links</div>
              <div class="stat-value">{{ friendLinkList.length }}</div>
              <div class="stat-actions">
                <label class="btn btn-sm btn-success" :for="modalId">申请友链</label>
              </div>
            </div>
          </div>
        </div>
        <!-- 友链列表-->
        <div class="friend-link-main mt-6">
          <AnnLoading :loading="loading">
            <div class="link-list flex flex-wrap justify-center items-stretch" v-if="friendLinkList.length>0">
              <div v-for="item in friendLinkList" :key="item.id" class="w-full lg:w-1/4 p-2">
                <div
                    class="card shadow-xl bg-base-100 transition duration-500 ease-in-out hover:scale-105 border border-base-300 h-full">
                  <NuxtLink target="_blank" :to="item.blogAddress">
                    <div class="card-body p-2  sm:p-4">
                      <h2 class="card-title">{{ item.blogTitle }}</h2>
                      <div class="flex items-center">
                        <div class="avatar">
                          <div class="w-12 rounded-full">
                            <img :src="item.blogLogoImage" alt="blogLogoImage">
                          </div>
                        </div>
                        <p class="text-sm pl-2">{{ item.blogDesc }}</p>
                      </div>
                    </div>
                  </NuxtLink>
                </div>
              </div>
            </div>
            <AnnEmptyPage v-else/>
          </AnnLoading>
        </div>
      </div>
    </NuxtLayout>
    <AnnModal :modal-id="modalId" title="友链信息">
      <!-- 友链申请表单 -->
      <div class="pl-8 pt-6">
        <div class="flex items-center mb-6">
          <label class="w-20">网站名称</label>
          <input type="text" placeholder="请输入网站名称" class="input input-bordered input-sm max-w-xs w-5/6"
                 v-model="friendLinkWebBo.blogTitle"/>
        </div>
        <div class="flex items-center mb-6">
          <label class="w-20">网站简介</label>
          <input type="text" placeholder="请输入网站简介" class="input input-bordered input-sm max-w-xs w-5/6"
                 v-model="friendLinkWebBo.blogDesc"/>
        </div>
        <div class="flex items-center mb-6">
          <label class="w-20">网站logo</label>
          <input type="text" placeholder="请输入网站logo链接" class="input input-bordered input-sm max-w-xs w-5/6"
                 v-model="friendLinkWebBo.blogLogoImage"/>
        </div>
        <div class="flex items-center mb-6">
          <label class="w-20">网站地址</label>
          <input type="text" placeholder="请输入网站地址" class="input input-bordered input-sm max-w-xs w-5/6"
                 v-model="friendLinkWebBo.blogAddress"/>
        </div>
      </div>
      <div>
        <label class="flex flex-end btn btn-success" :for="modalId" @click="handleApplyFriendLink(friendLinkWebBo)">确
          认</label>
      </div>
    </AnnModal>
  </div>

</template>
<script lang="ts" setup>
import {applyFriendLink, queryFriendLinkList} from "~/api/friendLink";
import type {BlogFriendLinkWebBo, BlogFriendLinkWebVo} from "~/api/friendLink/types";
import {showMessage} from "~/utils/toast";

const modalId = ref<string>("friendLinkModal")
const title = ref<string>("友链")
useHead({
  title: title.value,
  titleTemplate: title => `${title} - Annlcc's Blog`,
})
const loading = ref(true)
const friendLinkList = ref<BlogFriendLinkWebVo[]>([])
const myFriendLink = ref<BlogFriendLinkWebVo>({
  id: "",
  blogTitle: "",
  blogDesc: "",
  blogAddress: "",
  blogLogoImage: ""
})
const friendLinkWebBo = reactive<BlogFriendLinkWebBo>({
  blogTitle: "",
  blogDesc: "",
  blogAddress: "",
  blogLogoImage: ""
})

/**
 * 查询友链列表
 */
const handleQueryFriendLinkList = async () => {
  loading.value = true
  const {data: res} = await useAsyncData("queryFriendLinkList", () => queryFriendLinkList())
  friendLinkList.value = res.value?.data as BlogFriendLinkWebVo[]
  myFriendLink.value = friendLinkList.value.find(item => item.id == 1) as BlogFriendLinkWebVo
  loading.value = false
}
handleQueryFriendLinkList()
const handleApplyFriendLink = async (friendLinkWebBo: BlogFriendLinkWebBo) => {
  const {data: res} = await useAsyncData("applyFriendLink", () => applyFriendLink(friendLinkWebBo))
  if (res.value?.code == 200) {
    showMessage("申请成功，请等待审核")
    clearForm(friendLinkWebBo);
  }
}
const clearForm = (friendLinkWebBo: BlogFriendLinkWebBo) => {
  friendLinkWebBo.blogAddress = ""
  friendLinkWebBo.blogTitle = ""
  friendLinkWebBo.blogDesc = ""
  friendLinkWebBo.blogLogoImage = ""
}
</script>
